<template>
  <div class="content">
    <div class="header">
      <h3 class="title">{{ contentConfig?.header?.title ?? "数据列表" }}</h3>
      <el-button v-if="isCreate" type="primary" @click="handleNewData">{{
        contentConfig?.header?.btnText ?? "新建数据"
      }}</el-button>
    </div>
    <div class="table">
      <el-table
        :data="pageList"
        :border="true"
        :row-key="contentConfig?.childrenTree?.rowKey"
        style="width: 100%"
      >
        <template v-for="item in contentConfig.propsList" :key="item.prop">
          <!-- <el-table-column align="center" :label="item.label" :prop="item.prop" :width="item.width ?? '150px'"></el-table-column>-->
          <el-table-column
            v-if="item.type === 'index' || item.type === 'selection'"
            align="center"
            v-bind="item"
          />
          <el-table-column v-else-if="item.type === 'custom'" align="center" v-bind="item">
            <template #default="scope">
              <slot :name="item.slotName" v-bind="scope" :prop="item.prop" :leaderRange="10" />
            </template>
          </el-table-column>
          <el-table-column v-else align="center" v-bind="item">
            <template #default="scope">
              <span v-if="item.type === 'timer'">{{ formatUTC(scope.row[item.prop]) }}</span>
              <span v-else-if="item.type === 'handler'">
                <el-button
                  v-if="isUpdate"
                  type="primary"
                  size="small"
                  icon="EditPen"
                  link
                  @click="handleEditClick(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-if="isDelete"
                  type="danger"
                  size="small"
                  icon="Delete"
                  link
                  @click="handleDeleteClick(scope.row.id)"
                >
                  删除
                </el-button>
              </span>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:pageSize="pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotalCount"
        @update:currentPage="handleCurrentChange"
        @update:pageSize="handlePageSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="content">
import { storeToRefs } from "pinia";
import { ref } from "vue";
import useSystemStore from "@/stores/modules/main/system/system";
import { formatUTC } from "@/utils/format";
import usePermission from "@/hooks/usePermission";

const { contentConfig } = defineProps(["contentConfig"]);
const emit = defineEmits(["newDataClick", "editDataClick"]);

// 0.判断是否有增删改查的权限
const isCreate = usePermission(contentConfig.pageName, "create");
const isDelete = usePermission(contentConfig.pageName, "delete");
const isUpdate = usePermission(contentConfig.pageName, "update");
const isQuery = usePermission(contentConfig.pageName, "query");

// 1.请求数据
const systemStore = useSystemStore();
const currentPage = ref(1);
const pageSize = ref(10);

systemStore.$onAction(({ name, after }) => {
  after(() => {
    if (
        name === "deletePageByIdAction" ||
        name === "editPageDataAction" ||
        name === "newPageDataAction"
    ) {
      currentPage.value = 1;
    }
  })
});

function fetchPageListData(queryInfo: any = {}) {
  // 0.判断是否具有查询权限
  if (!isQuery) return;
  // 1.获取offset和size
  const size = pageSize.value;
  const offset = (currentPage.value - 1) * size;

  // 2.发生网络请求
  systemStore.postPageListAction(contentConfig.pageName, { offset, size, ...queryInfo });
}

fetchPageListData();

// 2.展示数据
const { pageList, pageTotalCount } = storeToRefs(systemStore);

// 3.绑定分页数据
function handleCurrentChange() {
  fetchPageListData();
}

function handlePageSizeChange(newPageSize: number) {
  pageSize.value = newPageSize;
  fetchPageListData();
}

function handleResetClick() {
  currentPage.value = 1;
  pageSize.value = 10;
  fetchPageListData();
}

// 4.新建数据的处理
function handleNewData() {
  emit("newDataClick");
}

// 5.删除和编辑操作
function handleDeleteClick(id: number) {
  systemStore.deletePageByIdAction(contentConfig.pageName, id);
}

function handleEditClick(data: any) {
  emit("editDataClick", data);
}

// 暴露函数
defineExpose({
  fetchPageListData,
  handleResetClick
});
</script>

<style scoped lang="less">
.content {
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;

  .header {
    display: flex;
    height: 45px;
    padding: 0 5px;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 20px;
      font-weight: 700;
    }

    .handler {
      align-items: center;
    }
  }

  .table {
    :deep(.el-table__cell) {
      padding: 14px 0;
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
}
</style>
